import { Form, Input, Button } from 'antd'
import {userStores} from '@/stores/User'
import { observer } from 'mobx-react-lite'
import './login.less'
import { useNavigate } from 'react-router-dom'

interface FormValues {
  username: string;
  password: string;
}

const Login = () => {

  const navigation = useNavigate()
  //登陆成功
  const onFinish = async (values: FormValues) => {
    const res = await userStores.getLogin(values)
    res && navigation('/dashboard/dashboardIndex')
    console.log(res)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <div className='wp'>
      <div className='login'>
        <Form
          name='basic'
          layout='vertical'
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'
          style={{ width: '100%' }}
        >
          <Form.Item
            label='用户名'
            name='username'

            rules={[{ required: true, message: '用户名是必填的!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label='密码'
            name='password'
            rules={[{ required: true, message: '密码也是必填的哦!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item wrapperCol={{ span: 24 }}>
            <Button type='primary' htmlType='submit' block={true}>
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default observer(Login)
